<template>
  <div class="pageWapper">
    <Header title="创建实验" />
    <!-- <NavBar title="创建实验" /> -->
    <div class="pageWapper_content">
      <Form @submit="onSubmit">
        <CellGroup inset>
          <Field
            v-model="taiQu"
            name="taiQu"
            label="实验所在台区"
            placeholder="请输入实验所在台区"
            :rules="[{ required: true, message: '请填写实验所在台区' }]"
          />
          <Field
            v-model="address"
            name="address"
            label="地址"
            placeholder="请输入地址"
            :rules="[{ required: true, message: '请填写地址' }]"
          />
          <Field
            v-model="position"
            is-link
            readonly
            name="position"
            label="安装点位置"
            placeholder="请选择安装点位置"
            :rules="[{ required: true, message: '请选择安装点位置' }]"
            @click="showPicker = true"
          />
          <Popup v-model:show="showPicker" position="bottom">
            <Picker
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </Popup>
        </CellGroup>
        <div class="bottomBtn">
          <Button round block type="primary" native-type="submit">
            下一步
          </Button>
        </div>
      </Form>
    </div>
  </div>
  <Dialog
    v-model:show="show"
    :title="dialogTitle"
    show-cancel-button
    @confirm="confirmOk"
  >
    <CellGroup inset>
      <div style="display: flex">
        <Field
          v-model="outNumber"
          label=""
          placeholder="请输入需要安装检测的分支数量"
        />
      </div>
    </CellGroup>
  </Dialog>
</template>

<script lang="ts" setup>
import Header from "@/components/Header.vue"
import { ref } from "vue"
import { useRouter } from "vue-router"
import {
  Form,
  Field,
  CellGroup,
  Button,
  Popup,
  Picker,
  showFailToast,
  Dialog
} from "vant"
import { useCreateExperiment } from "@/hooks/useCreateExperiment"

const { createExperimentDataFn, createExperimentData } = useCreateExperiment()

const taiQu = ref("")
const address = ref("")
const position = ref("")

onMounted(() => {
  if (createExperimentData.value.taiQu) {
    taiQu.value = createExperimentData.value.taiQu
    address.value = createExperimentData.value.address
    position.value = createExperimentData.value.position
  }
})

const showPicker = ref(false)
const columns = [
  { text: "表前", value: "表前" },
  { text: "表箱前", value: "表箱前" },
  { text: "分支箱前", value: "分支箱前" },
  { text: "农网台区T节点前", value: "农网台区T节点前" }
]

const onConfirm = ({ selectedOptions }) => {
  position.value = selectedOptions[0]?.text
  showPicker.value = false
}

const $router = useRouter()
const show = ref(false)
const dialogTitle = ref("")
const onSubmit = (values) => {
  createExperimentDataFn({
    ...createExperimentData.value,
    taiQu: values.taiQu,
    address: values.address,
    position: values.position
  })
  if (values.position === "农网台区T节点前" || values.position === "分支箱前") {
    show.value = true
    dialogTitle.value = "出线数量"
  } else {
    $router.push({
      path: "/createExperiment/step2"
    })
  }
}

// 出线数量
const outNumber = ref(0)
const confirmOk = () => {
  if (!outNumber.value) {
    showFailToast("请输入出线数量")
  } else {
    if (Number(outNumber.value) > 3) {
      showFailToast("出线数量最多为三条")
      return
    }
    createExperimentDataFn({
      ...createExperimentData.value,
      outNumber: outNumber.value
    })
    $router.push({
      path: "/createExperiment/step2"
    })
  }
}
</script>
<style scoped lang="less">
@import "./index.less";
</style>
